<script setup lang="ts">
import { Page } from '@/entity/Page';
import { SysMenu } from '@/entity/SysMenu';
import menuService from '@/services/menu.service';
import { AxiosError } from 'axios';
import { ElLoading, ElMessage, ElMessageBox, type ElPagination, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton, ElDialog, ElIcon } from 'element-plus';
import { onMounted, ref, watch } from 'vue';
import { SysMenuType } from "@/entity/SysMenuType";
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
});

const emits = defineEmits(["update:visible", "confirm"]);

const showDialog = ref(false);

watch(
    () => props.visible,
    async (value) => {
        showDialog.value = value;
        if (showDialog.value == true) {
            searchEntity.value = createDefaultSearchEntity();
            load();
        }
    }
);


const createDefaultSearchEntity = () => {
    const e = new SysMenu();
    return e;
}

const treeList = ref<SysMenu[]>([]);
const selections = ref<SysMenu[]>([]);
const searchEntity = ref(createDefaultSearchEntity());
const tableLoading = ref(false);

const load = async (no?: number, size?: number, searchObj?: SysMenu) => {
    try {
        tableLoading.value = true;
        const res = await menuService.treeList();
        treeList.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        tableLoading.value = false;
    }
}

const selectionChanged = (val: SysMenu[]) => {
    selections.value = val;
}

onMounted(async () => {
    await load();
});

const cancel = () => {
    emits("update:visible", false);
}

const confirm = () => {
    emits("confirm", selections.value);
    closeDialog();
}

const closeDialog = () => {
    cancel();
};
</script>

<template>
    <ElDialog v-model="showDialog" width="80%" @close="closeDialog()" title="岗位帮助">
        <ElTable row-key="id" table-layout="auto" :data="treeList" :tree-props="{ children: 'children' }" default-expand-all
            max-height="400px" @selection-change="selectionChanged($event)" v-loading="tableLoading">
            <ElTableColumn type="selection" width="55" />
            <ElTableColumn prop="name" label="名称"></ElTableColumn>
            <!-- <ElTableColumn prop="code" label="编号"></ElTableColumn> -->
            <ElTableColumn prop="type" label="类型">
                <template #default="scope">
                    <span v-if="scope.row.type == SysMenuType.DIRECTORY">目录</span>
                    <span v-if="scope.row.type == SysMenuType.MENU">菜单</span>
                    <span v-if="scope.row.type == SysMenuType.BUTTON">按钮</span>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="icon" label="图标">
                <template #default="scope">
                    <ElIcon v-if="scope.row.icon">
                        <component :is="scope.row.icon"></component>
                    </ElIcon>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="display" label="是否显示">
                <template #default="scope">
                    <span v-if="scope.row.display">是</span>
                    <span v-else>否</span>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="path" label="路由"> </ElTableColumn>
            <ElTableColumn prop="selector" label="选择器"> </ElTableColumn>
            <!-- <ElTableColumn prop="description" label="描述"></ElTableColumn> -->
            <ElTableColumn prop="createdTime" label="创建时间"></ElTableColumn>
        </ElTable>

        <template #footer>
            <div class="dialog-footer">
                <ElButton @click="cancel()">取消</ElButton>
                <ElButton type="primary" @click="confirm()">确定</ElButton>
            </div>
        </template>
    </ElDialog>
</template>

<style scoped lang="scss"></style>